<template>
	<view>
		<view class="sww-swipe-box" ref="swipeBoxRef" :style="[customStyle]">
			<swiper
				:indicator-dots="indicatorDots && !(currentIndex === 0 && swipeList[currentIndex] && swipeList[currentIndex].video)"
				:indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor"
				:autoplay="autoplay && !playing" :current="current" :interval="interval" :duration="duration"
				:circular="circular" :vertical="vertical" class="swipe-list" @change="$swipeChange"
				:style="[{ height: (height || firstImgHeight) + 'px', borderRadius }]">
				<swiper-item v-for="(item, index) in swipeList" :key="index" class="swiper_item">
					<!-- 视频播放，如果商品带有视频就会展示播放按钮 -->
					<block v-if="index === 0 && item.video">
						<video :enable-progress-gesture="false" id="video_0"
							:style="{width:'100%','--height': (height || firstImgHeight) + 'px' }" @play="playVideo"
							@pause="pauseVideo" @ended="pauseVideo" @timeupdate="videoTime" :src="item.video"
							class="video_cont"></video>
					</block>
					<image v-else :src="item.img" mode="aspectFill" @click="$onClick(item, index)" @error="
							e => {
								handleError(e, index);
							}
						" :style="{ 'border-radius': (imgRadius || 0) + 'px' }"></image>
				</swiper-item>
			</swiper>
			<slot></slot>
		</view>
	</view>
</template>
<script>
	import {
		uniGetImageInfo,
		uniPreview
	} from '../../utils/uniPromise';
	import {
		pathLink,
		pageComponentsLink
	} from '@/utils/jump.js';
	export default {
		props: {
			indicatorDots: {
				//是否显示面板指示点
				type: Boolean,
				default: false
			},
			indicatorColor: {
				//指示点颜色
				type: String,
				default: 'rgba(0, 0, 0, .3)'
			},
			indicatorActiveColor: {
				//当前选中的指示点颜色
				type: String,
				default: 'rgba(255, 255, 255, 1)'
			},
			autoplay: {
				//是否自动切换
				type: Boolean,
				default: false
			},
			current: {
				//当前所在滑块的 index
				type: Number,
				default: 0
			},
			interval: {
				//自动切换时间间隔
				type: Number,
				default: 5000
			},
			duration: {
				//滑动动画时长
				type: Number,
				default: 500
			},
			circular: {
				//是否采用衔接滑动
				type: Boolean,
				default: false
			},
			vertical: {
				//滑动方向是否为纵向
				type: Boolean,
				default: false
			},
			customStyle: {
				//自定义样式
				type: Object,
				default: () => {}
			},
			height: {
				type: [String, Number],
				default: 0
			},
			borderRadius: {
				type: String,
				default: ''
			}, // 组件圆角
			imgRadius: {
				type: [String, Number],
				default: null
			}, // 图片圆角
			list: {
				type: [Array, Boolean],
				default: false
			},
			type: {
				type: [String, Number],
				default: 3
			},
			previewImg: {
				type: Boolean,
				default: true
			}, // 图片是否允许预览
			videoDuration: {
				type: Number,
				default: null
			}, // 最多可播放时长
		},
		data() {
			return {
				swipeList: [],
				firstImgHeight: 0,
				currentIndex: 0,
				playing: false,
				videoText: null
			};
		},
		watch: {
			list: {
				handler(val) {
					if (val && val.length > 0) {
						this.handlerList(val);
						if (!this.height) {
							this.$getFirstImgHeight();
						}
					}
				},
				immediate: true
			}
		},
		mounted() {
			if (!this.list) {
				this.$initPage();
			}
		},
		methods: {
			$initPage() {
				this.$resPost('GetCommonPicList', {
					type: this.type
				}).then(({
					data
				}) => {
					this.handlerList(data);
					if (!this.height && data[0]) {
						this.$getFirstImgHeight();
					}
				});
			},
			handleError(e, index) {
				this.$set(this.swipeList[index], 'img', this.vuex_config.errImg);
			},
			handlerList(list) {
				// 有可能第一项是视频
				if (list[0] && list[0].video) {
					// #ifndef  MP-BAIDU
					this.videoText = uni.createVideoContext(`video_0`, this);
					// #endif
					// #ifdef MP-BAIDU
					// 百度用上面那个方法会报错，神经病
					this.videoText = swan.createVideoContext(`video_0`)
					// #endif
				}

				this.swipeList = list.map(item => {
					if (item.video) {
						// let index = item.video.lastIndexOf('.')
						// let str = item.video.substring(0,index+1) + 'jpg'
						// item.img = this.$formatImg(str)
						item.img = '';
					} else {
						item.img = this.$formatImg(item.img || item.image);
					}
					return item;
				});

			},
			// 获取第一张图片的高度，将其设置为轮播高度
			$getFirstImgHeight() {
				this.$nextTick(() => {
					if (this.swipeList[0] && this.swipeList[0].img) {
						this.getWH(this.swipeList[0].img);
					} else if (this.swipeList[1] && this.swipeList[1].img) {
						this.getWH(this.swipeList[1].img);
					} else if (this.swipeList[0]) {
						/*只有一个视频*/
						this.firstImgHeight = 211;
					}
				});
			},
			getWH(imgUrl) {
				this.$nextTick(() => {
					setTimeout(() => {
						this.$uGetRect('.sww-swipe-box')
							.then(resBox => {
								let str = imgUrl.replace('http:', 'https:');
								uniGetImageInfo(str)
									.then(res => {
										this.firstImgHeight = (resBox.width / res.width) * res
											.height;
									})
									.catch(() => {
										this.firstImgHeight = 375;
									});
							})
							.catch(err => {
								this.firstImgHeight = 375;
							});
					}, 0)
				});
			},
			onVideoPlay(url) {
				this.$emit('onPlayVideo', url);
			},
			// 轮播切换
			$swipeChange(e) {
				this.currentIndex = e.detail.current;
				if (this.videoText && this.currentIndex !== 0) {
					this.videoText.pause();
				}
				this.$emit('change', e.detail);
			},
			// 点击图片
			$onClick(item, index) {
				if (item.mini_url) {
					pathLink({
						path: item.mini_url
					});
				} else if (item.linkUrl) {
					pageComponentsLink(item);
				} else if (this.previewImg) {
					uniPreview(index, this.swipeList.map(item => this.$formatImg(item.img)));
				}
			},
			playVideo() {
				this.playing = true;
			},
			pauseVideo() {
				this.playing = false;
			},
			// 播放进度变化
			videoTime(e) {
				if (this.videoDuration && e.detail.currentTime >= this.videoDuration) {
					this.videoText.stop()
					this.videoText.pause()
					this.$emit('videoPreEnd')
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.sww-swipe-box {
		width: 100%;
		min-height: 1rpx;
		position: relative;
		overflow: hidden;

		.swipe-list {
			width: 100%;
			transition: all 0.3s;
			overflow: hidden;
		}

		// .swipeList_video_item {
		// 	display: flex;
		// 	align-items: center;
		// 	justify-content: center;
		// 	position: absolute;
		// 	top: 50%;
		// 	left: 50%;
		// 	transform: translate(-50%, -50%);
		// 	margin: auto;
		// 	width: 20%;
		// 	height: 20%;
		// 	border-radius: 50%;
		// 	z-index: 100;
		// }
		// .video_box{
		// 	position: relative;
		// 	background-color: #f05b29;
		// 	width: 100%;
		// 	height: 100%;
		.video_cont {
			width: 100%;
			// height: 100%;
			height: var(--height);
		}

		// }
	}
</style>
